<template>
  <div id="viewDiv">
    <legendLayer />
    <div class="computeArea" @click="area">计算</div>
  </div>
</template>

<script>
import { EsriNameSpace } from '../api/arcgis/esri-namespace'
import {
  mapCenter,
  mapZoom,
  NjSpatialReference,
} from '../../public/arcgisParam/arcgisParam'
import { AddGraphics } from '../lib/addGraphic'
import { CreateSymbol } from '../lib/createSymbol'
import ArcgisUtils from '../lib/arcgisUtils'
import legendLayer from '../views/Legend-layer'

export default {
  name: 'RENFANG',
  components: {
    legendLayer,
  },
  data() {
    return {
      EsriNameSpace: new EsriNameSpace(),
      CreateSymbol: new CreateSymbol(),
      ArcgisUtils: new ArcgisUtils(),
      spatialReference: '',
    }
  },
  mounted() {
    //接收数据
    this.$bus.$on('gggg-click', (layerId) => {
      this.ArcgisUtils.setLayerVisible(this.ZGMap, layerId)
    })

    this.EsriNameSpace.initNameSpace().then(() => {
      this.spatialReference = new this.EsriNameSpace.SpatialReference({
        wkt: NjSpatialReference,
      })
      // 初始化地图
      this.initMap(mapCenter, mapZoom).then((initMapData) => {
        this.clickEventLayer(initMapData.view)
        this.moveEventLayer(initMapData.view)
        this.addGraphic = new AddGraphics(initMapData.map, this.EsriNameSpace)
        console.log('加addGraphic类')
        // 加面
        const line10Layer = this.addGraphic.createGraphicsLayer('line10')
        this.ZGMap.add(line10Layer)

        // Create a polygon geometry
        const polygon = {
          type: 'polygon', // autocasts as new Polygon()
          rings: [
            [339679.47329999972, 313794.58909999952],
            [339749.40130000003, 313705.11209999956],
            [339874.48450000025, 313775.33750000037],
            [339962.9606999997, 313633.38570000045],
            [340009.6643000003, 313558.92349999957],
            [340058.62390000001, 313491.99589999951],
            [340020.53890000004, 313464.13089999929],
            [340029.45849999972, 313451.62989999913],
            [339980.50650000013, 313414.66330000013],
            [340110.75090000033, 313202.3331000004],
            [340103.92590000015, 313108.84009999968],
            [339796.79129999969, 312924.89069999941],
            [339914.70469999965, 312733.15249999985],
            [340021.60450000037, 312556.56369999982],
            [339550.83609999996, 312254.00349999964],
            [339584.35390000045, 312199.46289999969],
            [339678.35030000005, 312048.01029999927],
            [339370.03610000014, 311853.47450000048],
            [339060.35030000005, 311660.22169999965],
            [338958.71210000012, 311683.59329999983],
            [338941.67470000032, 311680.78669999912],
            [338711.00009999983, 311537.72210000083],
            [338549.54370000027, 311437.10950000025],
            [338390.53450000007, 311338.92909999937],
            [338072.58629999962, 311139.99129999988],
            [337435.62530000042, 310745.10510000028],
            [336617.42690000031, 310214.98550000042],
            [336604.56790000014, 310200.1054999996],
            [336578.14190000016, 310094.14169999957],
            [335792.58990000002, 309602.17329999991],
            [335695.81109999958, 309757.59249999933],
            [335686.04590000026, 309759.3339000009],
            [335674.20590000041, 309755.4199000001],
            [335347.22250000015, 309552.57630000077],
            [335281.14350000024, 309660.35229999945],
            [335774.54870000016, 309968.28130000085],
            [335780.19469999988, 309989.45370000042],
            [335700.13829999976, 310123.10669999942],
            [335968.59509999957, 310294.29670000076],
            [335924.53509999998, 310388.74650000036],
            [337418.22549999971, 311325.21089999937],
            [337306.18989999965, 311501.78089999966],
            [337589.69969999976, 311672.79969999939],
            [337335.10290000029, 312089.99389999919],
            [336960.5856999997, 312678.05929999985],
            [336231.72369999997, 312211.35209999979],
            [336352.39989999961, 312042.36950000003],
            [336174.26209999993, 311929.40230000019],
            [336413.34829999972, 311537.49210000038],
            [335470.62509999983, 310947.08249999955],
            [335311.48170000035, 310850.43390000053],
            [335299.16569999978, 310847.51469999924],
            [335289.96410000045, 310851.5831000004],
            [335159.42030000035, 311064.9263000004],
            [335293.75789999962, 311148.76070000045],
            [335361.14690000005, 311199.04050000012],
            [335298.09229999967, 311311.59029999934],
            [335338.98110000044, 311341.51590000093],
            [335306.36209999956, 311398.56289999932],
            [335255.77170000039, 311485.67830000073],
            [335274.60369999986, 311501.24530000053],
            [335204.98450000025, 311626.4001000002],
            [335298.98909999989, 311686.62350000069],
            [335302.46889999975, 311700.81210000068],
            [335418.25270000007, 311771.40509999916],
            [335468.3328999998, 311802.13509999961],
            [335663.15950000007, 311922.48650000058],
            [335787.83789999969, 311997.53229999915],
            [335688.12390000001, 312151.28409999982],
            [335552.83949999977, 312070.44290000014],
            [335517.45370000042, 312137.56110000052],
            [335645.34289999958, 312220.15169999935],
            [335542.68290000036, 312376.99369999953],
            [335682.31190000009, 312465.93449999951],
            [335815.50310000032, 312549.64690000005],
            [336082.35010000039, 312717.39609999955],
            [336170.90089999977, 312698.95170000009],
            [336467.07290000003, 312884.27229999937],
            [336764.45669999998, 313069.46609999985],
            [337358.6791000003, 313440.66970000044],
            [338546.20909999963, 314182.73489999957],
            [338593.6791000003, 314218.95470000058],
            [338612.73809999973, 314305.50390000083],
            [338697.38889999967, 314358.97629999928],
            [339158.14290000033, 314648.08049999923],
            [339533.41050000023, 313998.22350000031],
            [339679.47329999972, 313794.58909999952],
          ],
          spatialReference: this.spatialReference,
        }
        const polygondd = {
          type: 'polygon',
          rings: [
            [118.50952148437499, 31.87755764334002],
            [118.95996093749999, 31.87755764334002],
            [118.95996093749999, 32.22674287041067],
            [118.50952148437499, 32.22674287041067],
            [118.50952148437499, 31.87755764334002],
          ],
        }
        // Add the geometry and symbol to a new graphic
        const lineGraphic = new this.EsriNameSpace.Graphic({
          geometry: polygon,
          symbol: {
            type: 'simple-fill', // autocasts as new SimpleFillSymbol()
            color: 'red',
            outline: {
              color: [255, 255, 255],
              width: 1,
            },
          },
        })
        line10Layer.add(lineGraphic)
        setTimeout(() => {
          this.ZGMapView.goTo(lineGraphic)
        }, 5000)

        // 编辑图层
        const hh = this.addGraphic.createGraphicsLayer('sketch')
        this.addGraphic.mapAddLayer(initMapData.map, hh)
        const sketch = new this.EsriNameSpace.Sketch({
          layer: hh,
          view: initMapData.view,
          creationMode: 'single',
          layout: 'vertical',
        })
        initMapData.view.ui.add(sketch, 'top-right')
      })
    })
  },
  methods: {
    initMap(center, zoom) {
      return new Promise(async (resolve, reject) => {
        console.log('初始化地图--ING')
        const NJlayers = new this.EsriNameSpace.TileLayer({
          url:
            'http://localhost:6080/arcgis/rest/services/02NJPeopleSafe/NJPeopleSafe/MapServer',
          spatialReference: this.spatialReference,
        })

        this.ZGMap = new this.EsriNameSpace.Map({
          basemap: {
            baseLayers: [NJlayers],
          },
          spatialReference: this.spatialReference,
        })
        console.log(this.ZGMap)

        this.ZGMapView = new this.EsriNameSpace.MapView({
          map: this.ZGMap, // 地图类型样式
          container: 'viewDiv', // 地图容器
          center: center,
          zoom: zoom,
          popup: {
            // autoOpenEnabled	:false,
            collapseEnabled: false,
            alignment: 'top-center',
          },
          constraints: {
            // minScale: 500000,
            maxScale: 0,
            rotationEnabled: false, // 禁止旋转
          },
          navigation: {
            gamepad: {
              enabled: false,
            },
            browserTouchPanEnabled: false,
            momentumEnabled: false,
            mouseWheelZoomEnabled: true,
          },
        })
        resolve({ map: this.ZGMap, view: this.ZGMapView })
      })
    }, // end

    // 鼠标的点击事件
    clickEventLayer(mapView) {
      mapView.on('click', (event) => {
        mapView.hitTest(event).then((response) => {
          console.log(response)
          if (response.results.length > 0) {
            const currentGraphic = response.results.filter((result) => {
              return result.graphic.layer
            })[0].graphic
            // console.log(currentGraphic)

            var lat = Math.round(event.mapPoint.latitude * 1000000) / 1000000
            var lon = Math.round(event.mapPoint.longitude * 1000000) / 1000000
            var measureThisAction = {
              title: 'Measure Length',
              id: 'measure-this',
              image:
                'https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/live/Measure_Distance16.png',
            }
            mapView.popup.open({
              // Set the popup's title to the coordinates of the location
              // title: 'Reverse geocode: [' + lon + ', ' + lat + ']',
              location: event.mapPoint, // Set the location of the popup to the clicked location
              actions: [measureThisAction],
              container:
                "<div style='max-width: 156px;overflow: hidden;height: 100%;margin-top: 13px;word-wrap:break-word'>" +
                "<p style='font-size: 14px;color: #333333; margin: 0;'>" +
                '分所给他被告人发我' +
                '</p>' +
                '</div>',
            })

            /**
             * 点击有Graphic数据的时候，如果是相应的面数据，改变相应的样式
             */
            if (currentGraphic.layer.title == 'polygon2020') {
              for (const graphic of currentGraphic.layer.graphics.items) {
                // 面的初始样式
                graphic.symbol = this.CreateSymbol.createSimpleFillSymbol(
                  [0, 200, 179],
                  'solid',
                  '#33333',
                  5
                )
              }
              // 面的选择样式
              currentGraphic.symbol = this.CreateSymbol.createSimpleFillSymbol(
                'blue',
                'solid',
                'darkblue',
                1
              )
            }
          }
        })
      })
    }, // end click

    // 鼠标移动事件
    moveEventLayer(mapView) {
      mapView.on('pointer-move', (event) => {
        mapView.hitTest(event).then((response) => {
          if (response.results.length > 0) {
            document.body.style.cursor = 'pointer'
          } else {
            document.body.style.cursor = 'default'
          }
        })
      })
    }, // end moveEvent
    area() {
      const sketchLayer = this.ZGMap.findLayerById('sketch')
      const polygon2020 = this.ZGMap.findLayerById('polygon2020')

      // console.log(sketchLayer)
      this.computeArea(polygon2020, sketchLayer)
    }, // area
    computeArea(polygonLayer, drawLayer) {
      // 遍历已知的面 和 画的面进行拓扑关系检查
      /**
       * 1、已知的面包含画的面，计算画的面的面积
       * 2、已知的面与画的面相交，计算相交的面的面积
       * 3、画的面与多个已知的相交，计算相交的面的面积
       */
      const geoEngine = this.EsriNameSpace.geometryEngine
      const webMercatorUtils = this.EsriNameSpace.webMercatorUtils
      const polygonItems = polygonLayer.graphics.items
      const drawItems = drawLayer.graphics.items
      console.log(polygonItems)

      for (const polygonItem of polygonItems) {
        for (const drawItem of drawItems) {
          const ll = webMercatorUtils.webMercatorToGeographic(drawItem.geometry)
          if (geoEngine.intersects(ll, polygonItem.geometry)) {
            const kk = geoEngine.intersect(ll, polygonItem.geometry)
            const hhh = geoEngine.geodesicArea(kk, 'square-kilometers')
            console.log(hhh)
          }
        }
      }
    },
  }, //end methods
}
</script>

<style lang="less" scoped>
#viewDiv {
  width: 100vw;
  height: 100vh;
}

#viewDiv
  > div.esri-view-root
  > div.esri-ui
  > div.esri-ui-inner-container.esri-ui-manual-container
  > div.esri-component.esri-popup.esri-popup--aligned-top-center.esri-popup--shadow {
  background-color: rgba(212, 25, 123, 0.7);
}

// .esri-popup__pointer-direction {
//   width: 0;
//   height: 0;
// }
// .esri-popup__main-container {
//   background-color: red;
// }
// .esri-feature {
//   background-color: blue;
// }
// .esri-popup__button:hover {
//   background: #000;
// }
.computeArea {
  position: absolute;
  bottom: 100px;
  left: 100px;
  background-color: blue;
}
</style>
